<template>
    

    <!-- 卡片视图区 -->
    <el-card class="box-card">
        <template #header>
            <!-- 搜索与添加区域 -->
            <el-row :gutter="20">
                <el-col :span="2">
                    <el-button type="primary" @click="addDialogVisible = true">添加</el-button>
                </el-col>
            </el-row>
        </template>

        <el-timeline>
            <el-timeline-item center v-for="item in timeLineList" :timestamp="item.time_string" placement="top">
                <el-card>
                    <template #header>
                        <div class="card-header">
                            <span>{{ item.name }}</span>
                            <el-button type="primary" tag="span" :icon="Edit" circle class="edit" @click="editDialogShow(item.identify)" />
                        </div>
                    </template>
                    <p v-html="nl2br(item.content)"></p>
                </el-card>
            </el-timeline-item>
        </el-timeline>

    </el-card>


    <!-- 添加对话框 -->
    <el-dialog title="添加" v-model="addDialogVisible" width="60%" align-center>

        <el-form :model="addForm" label-position="right" label-width="80px">
            <el-form-item label="事件主题">
                <el-input v-model="addForm.name" placeholder="事件主题" />
            </el-form-item>
            <el-form-item label="事件内容">
                <el-input v-model="addForm.content" :rows="2" type="textarea" placeholder="事件内容" />
            </el-form-item>
            <el-form-item label="事件日期">
                <el-date-picker v-model="addForm.time_string" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="时间日期" />
            </el-form-item>
        </el-form>
        
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="addDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="addFormOp">确认</el-button>
          </span>
        </template>
    </el-dialog>

    <!-- 修改对话框 -->
    <el-dialog title="修改" v-model="editDialogVisible" width="60%" align-center>

        <el-form :model="editForm" label-position="right" label-width="80px">
            <el-form-item label="事件主题">
                <el-input v-model="editForm.name" placeholder="事件主题" />
            </el-form-item>
            <el-form-item label="事件内容">
                <el-input v-model="editForm.content" :rows="2" type="textarea" placeholder="事件内容" />
            </el-form-item>
            <el-form-item label="事件日期">
                <el-date-picker v-model="editForm.time_string" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="时间日期" />
            </el-form-item>
        </el-form>
    
        <template #footer>
            <span class="dialog-footer">
            <el-button @click="addDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="editFormOp">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { TimeLineListGo, TimeLineCreateGo, TimeLineItemGo, TimeLineEditGo } from '../wailsjs/go/utool/App'
import { nl2br } from '../utils/misc';
import { ElNotification } from 'element-plus';
import { Edit } from '@element-plus/icons-vue'

// ----数据定义区域 START----
let addDialogVisible = ref(false)
let editDialogVisible = ref(false)
const addForm = reactive({
    identify: '',
    name: '',
    content: '',
    time_string: '',
    create_time: '',
    update_time: '',
})
const editForm = reactive({
    identify: '',
    name: '',
    content: '',
    time_string: '',
    create_time: '',
    update_time: '',
})
let timeLineList = ref()
// ----数据定义区域 END----

// ----方法定义区域 START----
// const nl2br = (str:string) =>  str.replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + '<br/>' + '$2')
const getTimeLineList = () => {
    TimeLineListGo().then(res => {
        if (res.code != 1) {
            ElNotification.error({
                title: res.msg,
            })
            return
        }
        timeLineList.value = res.data
    })
}
const addFormOp = () => {
    // console.log(addForm,9999)
    if (addForm.name == '' || addForm.content == '' || addForm.time_string == '') {
        ElNotification.error({
            title: '请填写完整信息',
        })
        return
    }
    TimeLineCreateGo(addForm).then(res => {
        if (res.code != 1) {
            ElNotification.error({
                title: res.msg,
            })
            return
        }
        ElNotification.success({
            title: res.msg,
        })
        addDialogVisible.value = false
        resetData()
        getTimeLineList()
    })
}

const editDialogShow = (identify:string) => {
    TimeLineItemGo(identify).then((res:any) => {
        if (res.code != 1) {
            ElNotification.error({
                title: res.msg,
            })
            return
        }
        editForm.identify = identify
        editForm.name = res.data.name
        editForm.content = res.data.content
        editForm.time_string = res.data.time_string
        editDialogVisible.value = true
    })
}

const editFormOp = () => {
    if (editForm.name == '' || editForm.content == '' || editForm.time_string == '') {
        ElNotification.error({
            title: '请填写完整信息',
        })
        return
    }

    TimeLineEditGo(editForm).then(res => {
        if (res.code != 1) {
            ElNotification.error({
                title: res.msg,
            })
            return
        }
        ElNotification.success({
            title: res.msg,
        })
        editDialogVisible.value = false
        resetData()
        getTimeLineList()
    })
}

const resetData = () => {
    addForm.identify = ''
    addForm.name = ''
    addForm.content = ''
    addForm.time_string = ''
    addForm.create_time = ''
    addForm.update_time = ''


    editForm.identify = ''
    editForm.name = ''
    editForm.content = ''
    editForm.time_string = ''
    editForm.create_time = ''
    editForm.update_time = ''
}
// ----方法定义区域 END----


getTimeLineList()

</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.edit {
    display: inline;
}
</style>